<template>
  <div class="wrapper">
    <a-button style="margin-right:3rem;float:right" type="primary" @click="logout">退出系统</a-button>
    <div class="menu-cointainer">
      <div >

        <a-row type="flex" justify="space-around">
            <a-col :span="7" @click="gotoMenu" v-if="this.hasPermission.indexOf('S001') > -1 ">
              <router-link :to="{path:'/businessManage/dashboard',query:{system:'业务管理'}}">
                <div class="memu-button radius-top-left">
                  <a-icon type="cluster" />
                  <p>业务管理</p>
                </div>
              </router-link>
            </a-col>
            <a-col :span="7" @click="gotoMenu" v-else >
              <!--<router-link :to="{path:'/businessManage/dashboard',query:{system:'业务管理'}}">-->
                <div class="memu-button radius-top-left" style="background:#818384;color:#a2a1a1">
                  <a-icon type="cluster" />
                  <p>业务管理</p>
                </div>
              <!--</router-link>-->
            </a-col>
            <a-col :span="7" @click="gotoMenu" v-if="this.hasPermission.indexOf('S002') > -1 ">
              <router-link :to="{path:'/dataManage/dashboard',query:{system:'数据管理'}}">
                <div class="memu-button" style="background:#7fccc4;color:#fff">
                  <a-icon type="database" />
                  <p>数据管理</p>
                </div>
              </router-link>
            </a-col>
            <a-col :span="7" @click="gotoMenu" v-else>
              <!--<router-link :to="{path:'/dataManage/dashboard',query:{system:'数据管理'}}">-->
                <div class="memu-button" style="background:#818384;color:#a2a1a1">
                  <a-icon type="database" />
                  <p>数据管理</p>
                </div>
              <!--</router-link>-->
            </a-col>
            <a-col :span="7" v-if="this.hasPermission.indexOf('S003') > -1 ">
              <a href="http://10.16.50.175:8080" target="_self" >
                <div class="memu-button radius-bottom-right" style="background:#607D8B;color:#000">
                  <a-icon type="video-camera" />
                  <p>监控管理</p>
                </div>
              </a>
            </a-col>
              <a-col :span="7" v-else >
                <div class="memu-button radius-bottom-right" style="background:#818384;color:#a2a1a1">
                  <a-icon type="video-camera" />
                  <p>监控管理</p>
                </div>
              </a-col>
        </a-row>
        <a-row type="flex" justify="space-around" style="margin-top:2rem">
              <a-col :span="7" v-if="this.hasPermission.indexOf('S004') > -1 ">
                <a href="http:/10.16.50.175:18080/esbgovernor" target="_self">
                  <div class="memu-button radius-bottom-right" style="background:#000;color:#7fccc4">
                    <a-icon type="cloud-server" />
                    <p>服务管理</p>
                  </div>
                </a>
              </a-col>
              <a-col :span="7" v-else >
                <div class="memu-button radius-bottom-right" style="background:#818384;color:#a2a1a1">
                  <a-icon type="cloud-server" />
                  <p>服务管理</p>
                </div>
              </a-col>
              <a-col :span="7" v-if="this.hasPermission.indexOf('S005') > -1 ">
                <div class="memu-button" style="background:#fff;color#000">
                  <a-icon type="profile" />
                  <p>虚拟化资源</p>
                </div>
              </a-col>
              <a-col :span="7" v-else>
                <div class="memu-button" style="background:#818384;color:#a2a1a1">
                  <a-icon type="profile" />
                  <p>虚拟化资源</p>
                </div>
              </a-col>
              <a-col :span="7" @click="gotoMenu" v-if="this.hasPermission.indexOf('S000*') > -1 ">
                <router-link :to="{path:'/permissionManage/dashboard',query:{system:'权限管理'}}">
                  <div class="memu-button radius-top-left" style="background:#f65713;color:#fff">
                    <a-icon type="setting" />
                    <p>权限管理</p>
                  </div>
                </router-link>
              </a-col>
              <a-col :span="7" v-else>
                <div class="memu-button radius-top-left" style="background:#818384;color:#a2a1a1">
                  <a-icon type="setting" />
                  <p>权限管理</p>
                </div>
              </a-col>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GuideMenu',
  data() {
    return {}
  },
  computed: {

    /* isManager () {
      return global.isManager(global.SYS_BUSINSESS_MANAGE)
    },*/
    hasPermission() {
      var pp = localStorage.getItem('permissions')
      console.log(pp)
      return pp
    }
  },
  methods: {
    gotoMenu() {
      this.$store.commit('changeFirstNavSelected', '0')
    },
    setCookie(name, value, seconds) {
      seconds = seconds || 0 // seconds有值就直接赋值，没有为0
      var expires = ''
      if (seconds != 0) { // 设置cookie生存时间
        var date = new Date()
        date.setTime(date.getTime() + (seconds * 1000))
        expires = '; expires=' + date.toGMTString()
      }
      document.cookie = name + '=' + escape(value) + expires + '; path=/' // 转码并赋值
    },
    logout() {
      this.setCookie('token', '', -1)
      window.location.href = global.verifyUrl + '/logout?ReturnUrl=' + window.location.href
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.wrapper {
  background: #cfcfcf;
  height: 100vh;
}
.menu-cointainer {
  width: 60%;
  margin: 0 auto;
  padding-top: 10rem;
}
.memu-button {
  background: #e6e6e6;
  height: 18rem;
  cursor: pointer;
  text-align: center;
  font-size: 32px;
}
.radius-top-left {
  border-radius: 40px 0;
}
.radius-bottom-right {
  border-radius: 0 40px;
}
.anticon {
  font-size: 5rem;
  line-height: 10rem;
}
</style>
